<template>
  <div id="app">
    <a-layout style="min-height: max(100vh, 1280px)">
      <a-layout-header v-if="!isAuthPage && !homePage" class="modern-header">
        <div class="header-container">
          <div class="navbar-wrapper">
            <div class="logo-section" @click="$router.push('/')" style="cursor: pointer;">
              <img src="/logo.svg" alt="CodeWin" class="logo" />
              <h1 class="brand-name">CodeWin</h1>
            </div>
            <div class="nav-section">
              <a-menu mode="horizontal" :selected-keys="[currentRoute]" class="nav-menu">
                <a-menu-item key="/" @click="$router.push('/')">
                  <template #icon>
                    <Home :size="16" />
                  </template>
                  首页
                </a-menu-item>
                <a-menu-item key="/role" @click="$router.push('/role')">
                  <template #icon>
                    <Users :size="16" />
                  </template>
                  角色
                </a-menu-item>
                <a-menu-item key="/knowledge-base" @click="$router.push('/knowledge-base')">
                  <template #icon>
                    <FileText :size="16" />
                  </template>
                  知识库
                </a-menu-item>
                <a-menu-item key="/voice" @click="$router.push('/voice')">
                  <template #icon>
                    <Volume2 :size="16" />
                  </template>
                  音色
                </a-menu-item>
                <a-menu-item key="/role-chat" @click="$router.push('/role-chat')">
                  <template #icon>
                    <MessageCircle :size="16" />
                  </template>
                  角色聊天
                </a-menu-item>
                <a-menu-item key="/multi-chat" @click="$router.push('/multi-chat')">
                  <template #icon>
                    <Users :size="16" />
                  </template>
                  多人聊天
                </a-menu-item>
                <a-menu-item key="/audiobook" @click="$router.push('/audiobook')">
                  <template #icon>
                    <Headphones :size="16" />
                  </template>
                  AI听书
                </a-menu-item>
              </a-menu>
            </div>
            <div class="auth-section">
              <template v-if="!authStore.isLoggedIn">
                <a-button class="auth-btn" @click="$router.push('/login')">登录</a-button>
                <a-button type="primary" class="auth-btn primary" @click="$router.push('/register')">注册</a-button>
              </template>
              <template v-else>
                <a-dropdown placement="bottomRight">
                  <div class="user-info">
                    <a-avatar 
                      :size="40"
                      :class="userStore.profile?.avatar ? 'user-avatar-with-image' : 'user-avatar'"
                      :src="userStore.profile?.avatar"
                      :style="userStore.profile?.avatar ? {} : { backgroundColor: '#6366f1', color: 'white' }"
                    >
                      {{ (userStore.profile?.nickname || userStore.profile?.username || '游客')[0]?.toUpperCase() || 'U' }}
                    </a-avatar>
                    <span class="user-name">{{ userStore.displayName || '游客' }}</span>
                  </div>
                  <template #overlay>
                    <a-menu>
                      <a-menu-item key="profile" @click="handleOpenProfile">
                        <User :size="14" style="margin-right: 8px;" />
                        个人资料
                      </a-menu-item>
                      <a-menu-item key="components" @click="handleOpenComponents">
                        <Info :size="14" style="margin-right: 8px;" />
                        基础组件
                      </a-menu-item>
                      <a-menu-item v-if="userStore.isAdmin" key="admin" @click="handleOpenAdmin">
                        <Settings :size="14" style="margin-right: 8px;" />
                        系统管理
                      </a-menu-item>
                      <a-menu-divider />
                      <a-menu-item key="logout" @click="handleLogout">
                        <span style="color: #ff4d4f;">退出登录</span>
                      </a-menu-item>
                    </a-menu>
                  </template>
                </a-dropdown>
              </template>
            </div>
          </div>
        </div>
      </a-layout-header>
      <a-layout-content :style="isAuthPage ? 'padding: 0' : homePage ? 'padding: 0' : 'padding: 24px'">
        <router-view />
      </a-layout-content>
      <a-layout-footer v-if="!isAuthPage" class="modern-footer">
        <div class="footer-container">
          <div class="footer-content">
            <!-- 品牌信息区域 -->
            <div class="footer-brand">
              <div class="brand-info">
                <img src="/logo.svg" alt="CodeWin" class="footer-logo" />
                <h3 class="footer-brand-name">CodeWin</h3>
              </div>
              <p class="brand-description">
                AI驱动的角色扮演与语音对话平台
              </p>
              <p class="brand-slogan">
                沉浸式对话体验，让每个角色都栩栩如生
              </p>
            </div>

            <!-- 快速链接 -->
            <div class="footer-links">
              <div class="link-group">
                <h4 class="link-title">核心功能</h4>
                <ul class="link-list">
                  <li><router-link to="/role" class="footer-link">AI 角色扮演</router-link></li>
                  <li><router-link to="/role-chat" class="footer-link">语音对话系统</router-link></li>
                  <li><router-link to="/multi-chat" class="footer-link">多人聊天</router-link></li>
                  <li><router-link to="/role" class="footer-link">角色定制</router-link></li>
                </ul>
              </div>
              
              <div class="link-group">
                <h4 class="link-title">内容资源</h4>
                <ul class="link-list">
                  <!-- <li><router-link to="/script" class="footer-link">剧本中心</router-link></li> -->
                  <li><router-link to="/audiobook" class="footer-link">有声书库</router-link></li>
                  <li><router-link to="/knowledge-base" class="footer-link">知识库</router-link></li>
                  <li><router-link to="/role" class="footer-link">角色库</router-link></li>
                </ul>
              </div>
              
              <div class="link-group">
                <h4 class="link-title">支持中心</h4>
                <ul class="link-list">
                  <li><router-link to="/about" class="footer-link">基础组件</router-link></li>
                  <li><router-link to="/voice" class="footer-link">音色设置</router-link></li>
                  <li><router-link to="/#features" class="footer-link">核心功能</router-link></li>
                  <li><router-link to="/#faq" class="footer-link">常见问题</router-link></li>
                </ul>
              </div>
              
              <div class="link-group">
                <h4 class="link-title">关于我们</h4>
                <ul class="link-list">
                  <li><router-link to="/introduce" class="footer-link">产品介绍</router-link></li>
                   <li><router-link to="/introduce" class="footer-link">团队介绍</router-link></li>
                  <li><a href="https://gitee.com/jlx20020820" class="footer-link">联系我们</a></li>
                </ul>
              </div>
            </div>

            <!-- 联系信息 -->
            <div class="footer-contact">
              <h4 class="contact-title">联系我们</h4>
              <div class="contact-info">
                <div class="contact-item">
                  <Mail :size="16" />
                  <span>contact@codewin.top</span>
                </div>
                <div class="contact-item">
                  <Globe :size="16" />
                  <span>www.codewin.top</span>
                </div>
              </div>
              
              <!-- 社交媒体 -->
              <div class="social-links">
                <h5 class="social-title">关注我们</h5>
                <div class="social-icons">
                  <a href="https://gitee.com/jlx20020820" class="social-link" title="Gitee">
                    <Github :size="20" />
                  </a>
                  <a href="https://weixin.qq.com/" class="social-link" title="微信">
                    <MessageCircle :size="20" />
                  </a>
                  <a href="https://weibo.com/" class="social-link" title="微博">
                    <Share2 :size="20" />
                  </a>
                  <a href="https://jq.qq.com/?_wv=1027&k=5O3J3n5" class="social-link" title="QQ群">
                    <Users :size="20" />
                  </a>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 底部版权信息 -->
           <div class="footer-bottom">
             <div class="copyright">
               <p>© {{ currentYear }} CodeWin. All rights reserved. | 沉浸式AI角色扮演体验</p>
             </div>
             <div class="footer-meta">
               <span>Powered by AI</span>
               <span>•</span>
               <span>Made with ❤️ in China</span>
             </div>
           </div>
        </div>
      </a-layout-footer>
    </a-layout>
    
    <!-- 个人资料弹窗 -->
    <ProfileModal 
      v-model:open="profileModalOpen"
      @success="userStore.fetchUserInfo()"
    />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Home, Info, User, Mail, Globe, Github, MessageCircle, Share2, Users, FileText, Settings, Headphones, Volume2 } from 'lucide-vue-next'
import { useAuthStore, useUserStore } from '@/stores'
import { ProfileModal } from '@/components/Profile'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const userStore = useUserStore()

// 个人资料弹窗状态
const profileModalOpen = ref(false)

const currentRoute = computed(() => route.path)
const isAuthPage = computed(() => ['/login', '/register', '/forgot'].includes(route.path))
const homePage = computed(() => route.path === '/')

// 打开个人资料弹窗
const handleOpenProfile = () => {
  profileModalOpen.value = true
}

// 打开系统管理页面
const handleOpenAdmin = () => {
  router.push('/admin')
}

// 处理退出登录
const handleLogout = () => {
  authStore.logout()
  userStore.clearProfile()
  router.push('/login')
}

// 打开基础组件页面
const handleOpenComponents = () => {
  router.push('/about')
}

// 获取当前年份
const currentYear = computed(() => new Date().getFullYear())

// 组件挂载时初始化用户信息
onMounted(() => {
  if (authStore.isLoggedIn && !userStore.profile) {
    userStore.fetchUserInfo()
  }
})
</script>

<style>
#app {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
  margin: 0;
  padding: 0;
}

/* Modern Header Styles */
.modern-header {
  background: transparent !important;
  padding: 16px 0 !important;
  box-shadow: none !important;
  border-bottom: none !important;
  margin-bottom: 36px !important;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.navbar-wrapper {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 4px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease;
}

.logo-section:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

.logo {
  height: 28px;
  width: auto;
}

.brand-name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.5px;
}

.nav-section {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-menu {
  border: none !important;
  background: transparent !important;
  line-height: 40px !important;
}

.nav-menu .ant-menu-item {
  border-radius: 8px !important;
  margin: 0 4px !important;
  padding: 0 16px !important;
  transition: all 0.2s ease !important;
}

.nav-menu .ant-menu-item:hover {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #6366f1 !important;
}

.nav-menu .ant-menu-item-selected {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #6366f1 !important;
}

/* 覆盖 Ant Design 默认的下划线颜色 */
.nav-menu.ant-menu-horizontal > .ant-menu-item-selected::after, .ant-menu-item-active::after {
  border-bottom-color: #4338ca !important;
}

.auth-section {
  display: flex;
  gap: 8px;
}

.auth-btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.auth-btn:not(.primary) {
  border-color: rgba(99, 102, 241, 0.3) !important;
  color: #6366f1 !important;
}

.auth-btn:not(.primary):hover {
  border-color: #6366f1 !important;
  background: rgba(99, 102, 241, 0.05) !important;
}

.auth-btn.primary {
  background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important;
}

.auth-btn.primary:hover {
  background: linear-gradient(135deg, #5b5bd6, #7c3aed) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important;
}

/* User Info Styles */
.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-info:hover {
  background: rgba(99, 102, 241, 0.1);
}

.user-avatar {
  border: 2px solid rgba(99, 102, 241, 0.2);
  transition: all 0.2s ease;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.user-avatar-with-image {
  transition: all 0.2s ease;
}

.user-info:hover .user-avatar {
  border-color: #6366f1;
}

.user-info:hover .user-avatar-with-image {
  transform: scale(1.05);
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modern Footer Styles */
.modern-footer {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
  color: #ffffff !important;
  padding: 48px 0 0 0 !important;
  position: relative;
  overflow: hidden;
}

.modern-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-content {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 48px;
  padding-bottom: 32px;
}

/* 品牌信息区域 */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.brand-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.footer-logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-brand-name {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.5px;
}

.brand-description {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.brand-slogan {
  margin: 0;
  font-size: 14px;
  color: rgba(99, 102, 241, 0.9);
  font-weight: 500;
}

/* 快速链接区域 */
.footer-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.link-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
  padding: 4px 0;
}

.footer-link:hover {
  color: #6366f1;
  transform: translateX(4px);
}

/* 联系信息区域 */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-title {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.contact-item svg {
  color: #6366f1;
}

/* 社交媒体 */
.social-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.social-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.social-icons {
  display: flex;
  gap: 12px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.social-link:hover {
  background: rgba(99, 102, 241, 0.2);
  color: #6366f1;
  transform: translateY(-2px);
}

/* 底部版权区域 */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.copyright p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .footer-content {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  
  .footer-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .footer-links {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .social-icons {
    justify-content: center;
  }
}
</style>
